<template>
  <vue-scroll :ops="ops" ref="vs">
    <div
      class="log-container"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <div class="log-title">日志区</div>
      <div class="log-box">
        <log-item
          class="logitem"
          v-for="(item, index) in logarr"
          :key="index"
          :imageUrl="imageUrl"
          :content="item.content"
          :date="item.date"
        ></log-item>
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </vue-scroll>
</template>
<script>
import LogItem from "./LogItem"
import { FindFile, GetLog } from "../../api/index"
export default {
  data() {
    return {
      loading: true,
      imageUrl: "",
      logarr: [],
      total: 0,
      pageSize: 7,
      currentPage: 1,
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {
          scrollingX: false,
        },
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: "#b3c0d1",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  components: {
    LogItem,
  },
  created() {
    // 判断用户是否输入了密码（存在bug:在地址栏可以看到传输的参数）
    if (!this.$route.query.permissions) {
      this.$notify.error({
        title: "错误",
        message: "您必须回答访问密码后才有权限访问博主的日志",
      })
      this.$router.push("/home")
    }
    // 获取到用户头像
    FindFile().then((res) => {
      this.imageUrl = res.photo
    })
    // 获取日志
    this.getlog({ page: 1, limit: this.pageSize })
  },
  methods: {
    handleCurrentChange(val) {
      // 当页码改变时，重置滚动条
      this.$refs["vs"].scrollTo(
        {
          y: "0%",
        },
        0
      )
      this.logarr = []
      this.currentPage = val
      this.getlog({ page: this.currentPage, limit: this.pageSize })
    },
    getlog(data) {
      GetLog(data).then((res) => {
        this.logarr = res.data
        this.total = res.count
        this.loading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.log-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .log-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgb(194, 192, 192);
    font-size: 20px;
    text-indent: 10px;
    font-weight: bold;
    width: 900px;
    background: white;
    margin-top: 20px;
  }
  .log-box {
    margin-bottom: 20px;
    width: 900px;
    height: calc(100% - 40px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: white;
    padding-bottom: 20px;
    .logitem {
      margin-top: 30px;
    }
    .page {
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }
  }
}
</style>
